<!--
 * @Description: 搜索模板配置
 
 * @Date: 2021-06-10 19:31:01
 
 * @LastEditTime: 2022-02-09 20:29:49
-->
<template>
  <div class="wrap">

    <!-- 搜索展示 -->
    <div style="padding-right:360px">
      <phone-ctn>
        <search-bar></search-bar>
      </phone-ctn>
    </div>

    <!-- 搜索配置 -->
    <config-ctn title="搜索页设置">
      <config-wrap>
        <div class="mb15 f13">搜索热词</div>
        <div class="nav">
          <div class="mt10 mb15 f12 f-grey">最多配置 5 个精选热词</div>
          <draggable v-model='project.config.hotList'>
            <div
              class="nav-item"
              v-for="(item,index) in project.config.hotList"
              :key="index"
            >
              <div
                class="nav-delete"
                @click="project.config.hotList.splice(index,1)"
              >
                <i class="f12 icon icon-cha-"></i>
              </div>
              <el-input
                v-model="item.value"
                size='small'
              ></el-input>
            </div>
          </draggable>
          <div
            v-if="project.config.hotList.length<5"
            class="nav-add"
            @click="add"
          >
            新增
          </div>
        </div>
      </config-wrap>
    </config-ctn>
  </div>
</template>

<script>
import SearchBar from "@/components/SearchBar";

export default {
  name: "navigation",
  data() {
    return {
        project:{
    "_id": "62690740d9f4912ae0f7d588",
    "pages": [
        {
            "id": "000000",
            "name": "首页",
            "home": true,
            "componentList": [
                {
                    "component": "McSwiper",
                    "name": "广告轮播",
                    "icon": "ivu-icon-md-swap",
                    "list": [
                        {
                            "id": "0001",
                            "image": "https://oss.i-town.cn/itown/202311221058175012990.jpg"
                        },
                        {
                            "id": "0002",
                            "image": "https://oss.i-town.cn/itown/202311221058336102360.jpg"
                        },
                        {
                            "id": "0003",
                            "image": "https://oss.i-town.cn/itown/202311221058529104360.jpg"
                        }
                    ],
                    "attrs": {
                        "model": "basis",
                        "autoplay": true,
                        "loop": true
                    },
                    "styles": {
                        "pagePadding": "0",
                        "negativeMarginBottom": "0"
                    },
                    "id": "1651050315JEeHVc"
                }
            ]
        }
    ],
    "name": "售票小程序",
    "cover": "https://api.boss.i-town.cn/Upload/img/1639553326077.jpeg",
    "config": {
        "navigation": {
            "label": "导航",
            "styles": {
                "background": "#fff"
            },
            "list": [
                {
                    "id": "00001",
                    "icon": "icon-shop",
                    "text": "首页",
                    "jump": {
                        "type": "custom",
                        "id": "000000"
                    }
                },
                {
                    "id": "00003",
                    "icon": "icon-sort",
                    "text": "分类",
                    "jump": {
                        "type": "fixed",
                        "id": "category"
                    }
                },
                {
                    "id": "00004",
                    "icon": "icon-cart",
                    "text": "购物车",
                    "jump": {
                        "type": "fixed",
                        "id": "car"
                    }
                },
                {
                    "id": "00005",
                    "icon": "icon-my",
                    "text": "我的",
                    "jump": {
                        "type": "fixed",
                        "id": "my"
                    }
                }
            ]
        },
        "goodsGroups": [
            {
                "name": "新品上架",
                "type": "0001",
                "level": "1",
                "child": [ ]
            },
            {
                "name": "热销排行",
                "type": "0002",
                "level": "1",
                "child": [ ]
            }
        ],
        "listTpl": {
            "model": "one",
            "addIcon": "cart"
        },
        "categoryTpl": {
            "advertising": false
        },
        "hotList": [ ],
        "backgroundColor": "#FFFFFF"
    },
    "type": "mall",
    "industry": "hotel",
    "userId": "6269070fd9f4912ae0f7d583",
    "logo": "https://api.boss.i-town.cn/Upload/img/1638500579691.png",
    "id": "62690740d9f4912ae0f7d588"
},

    };
  },

  components: {
    SearchBar,
  },

  computed: {
    
  },

  methods: {
    add() {
      this.project.config.hotList.push({ value: "" });
    },
  },
};
</script>

<style lang="scss" scoped>
.nav-item {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 2px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>